import React from 'react'
import { changeNav,wxmtSetStoreInfo } from '../../../actions'
import { wxGetSubProduct, wxzhctProductConf } from '../../../actions/smartDr.js'
import { connect } from 'react-redux'
import { createForm } from 'rc-form'
import hhistory from '../../../history'
import {
    Button, List, InputItem, Flex
    , WingBlank, WhiteSpace, Popup, Tag, Toast, Icon
} from 'antd-mobile'
import { ajaxGet, ajaxPost } from 'wxAjaxUtil';

const Item = List.Item;
const Brief = Item.Brief;
class WxmtSetInfo extends React.Component {
    constructor(props) {
        super(props);

    }
    componentDidMount(){
        this.props.tochangeNav({title:"门店配置",rbtn:[
            <Button key="1" onClick={() => {
                this.props.form.validateFields(( error,value )=> {
                    if (error) {
                        Toast.info('请填写必填项')
                        return
                    }
                    this.props.wxmtSetStoreInfo(value);
                    hhistory.goBack();
                })
            }} type="primary" inline size="small">确定</Button>
        ]})
    }
    render() {
        const { getFieldProps} = this.props.form
        return(
            <div>
                {this.props.mdData.map( (val,index) =>{
                   return (
                       <WxmtSetInfolist form = {this.props.form} key={index} data = {val}></WxmtSetInfolist>
                   )
                })}
            </div>
        )
    }
}
//列表组件
class WxmtSetInfolist extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            data : this.props.data
        }
    }
    render() {
        const { getFieldProps} = this.props.form
        const {wxmtstoreinfo} = this.props
        return(
            <div>
                <Item thumb={this.state.data.logo} multipleLine>
                    {this.state.data.name}<Brief>{this.state.data.code}</Brief>
                </Item>
                <InputItem
                    {...getFieldProps( this.state.data.code+'$a',{
                        initialValue:wxmtstoreinfo[this.state.data.code+'$a'],
                        rules: [{required: true}]
                    })}
                    styleName="am-list"
                    clear
                    placeholder="必填"
                    autoFocus
                >美团外卖商家账号</InputItem>
                <InputItem
                    {...getFieldProps( this.state.data.code+'$b',{
                        initialValue:wxmtstoreinfo[this.state.data.code+'$a'],
                        rules: [{required: true}]
                    })}
                    styleName="am-list"
                    clear
                    placeholder="必填"
                    autoFocus
                >美团外卖商家密码</InputItem>
            </div>
        )
    }
}
const mapStateToProps = (state) => ({
    wxSubProducts: state.wxSmartdrs.wxSubProducts,
    wxzhctSubProduct: state.wxSmartdrs.wxzhctSubProduct,
    jtData: state.wxSmartdrs.jtData,
    mdData: state.wxSmartdrs.mdData,
    wxmtstoreinfo:state.wxmtstoreinfo
})
const mapDispatchToProps = (dispatch) => ({
    tochangeNav: navogj => dispatch(changeNav(navogj)),
    wxGetSubProduct: productCode => dispatch(wxGetSubProduct(productCode)),
    wxzhctProductConf: productConfig => dispatch(wxzhctProductConf(productConfig)),
    wxmtSetStoreInfo:storeinfo => dispatch(wxmtSetStoreInfo(storeinfo))
})

export default createForm()(connect(mapStateToProps, mapDispatchToProps)(WxmtSetInfo))